<template>
    <div>
        <van-nav-bar title="商品分类" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-tabs v-model:active="activeName" @click-tab="onClickTab">
            <van-tab :title="item.page_title" v-for="item in pageList" :name="item.page_id">
                <ul>
                    <li v-for="item in leibieList" @click="goxq(item.product_id)">
                        <img :src="item.product_img" alt="">
                        <span>{{ item.product_price }}￥</span>
                        <p>{{ item.product_name }}</p>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup lang='ts'>
import { leibiedata, homedata } from '@/api/http';
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
// 返回上一级菜单
const router = useRouter()
const onClickLeft = () => {
    router.push('/home')
};
const Route = useRoute()
const pageList = ref()
const leibieList = ref()
const hhh = Route.query.type
const activeName: any = ref(hhh);
let producttype = ref(1)

console.log(Route.query.type);
// 商品类别的的调取
const onload = () => {
    leibiedata({ product_type: Route.query.type }).then((res: any) => {
        console.log('商品的类别', res);
        leibieList.value = res.responseData
    })
}
onMounted(() => {
    leibiedata({ product_type: producttype.value }).then((res: any) => {
        console.log('商品的类别', res);
        leibieList.value = res.responseData
    })

    homedata({}).then((res: any) => {
        // console.log('首业数据', res);
        pageList.value = res.pageList
    })
})
const onClickTab = (id: any) => {
    console.log(id.name);
    leibiedata({ product_type: id.name }).then((res: any) => {
        console.log('商品的类别', res);
        leibieList.value = res.responseData
    })
};
// 跳转到详情页
const goxq = (id: any) => {
    router.push({ path: '/xq', query: { type: id } })
}
</script>
<style lang="scss">
#app {
    margin: 0;
    padding: 0;
}

ul {
    width: 96%;
    margin: 1rem auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    span {
        margin-left: 8rem;
        color: rgb(239, 231, 12);
    }

    li {
        width: 49%;
        background: #fff;

        img {
            width: 100%;
            height: 60%;
        }
    }
}
</style>